<template>
  <div class="content">
    <p class="title font-16-B">账号管理</p>
    <div class="flex">
      <div class="account-main">
        <p class="account-label font-14">主账号</p>
        <p class="account-info font-12">{{ info.account }}</p>
        <p class="account-label font-14">会员等级</p>
        <p class="account-info font-12">{{ info.level }} - 拥有{{ info.subAccount.length }}个子账号</p>
        <div class="account-desc flex flex-align-items-center font-14">
          <i class="iconfont icon-icon_jubao-mian"></i>（想拥有更多子账号?<span class="font-14 pointer"
            @click="toPath('/kocVip')">升级账号</span>类型）
        </div>
        <div class="account-desc flex flex-align-items-center font-14">
          <i class="iconfont icon-icon_jubao-mian"></i>（子账号与主账号的会员权益相同，并<span class="font-14">共享</span>主账号的资源数量）
        </div>
        <div class="account-desc flex flex-align-items-center font-14">
          <i class="iconfont icon-icon_jubao-mian"></i>（账号之间数据与操作均是<span class="font-14">独立</span>的）
        </div>
      </div>
      <div class="account-list">
        <p class="account-label font-14">账号列表</p>
        <div class="list">
          <div class="item flex">
            <p class="font-12">子账号</p>
            <p class="font-12">登录账号</p>
            <p class="font-12">使用人</p>
            <p class="font-12">操作</p>
          </div>
          <div v-for="(item, index) in info.subAccount" :key="index" class="item flex">
            <p class="font-12">{{ index + 1 }}</p>
            <p class="font-12">{{ item.account }}</p>
            <div class="item-input flex-between flex-align-items-center">
              <input v-model="item.name" type="text" placeholder="请输入名称" maxlength="8">
              <i class="iconfont icon-bianji pointer"></i>
            </div>
            <div class="item-btns flex-center flex-align-items-center">
              <p class="font-12 pointer" @click="openEditPwd(item)">{{ item.active ? '修改密码' : '激活' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <edit-pwd v-if="editPwdInfo.show" :info="editPwdInfo" @confirm="pwdConfirm"
    @close="editPwdInfo.show = false"></edit-pwd>
</template>

<script setup>
import EditPwd from './editPwd.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const info = ref({
  account: '15888888888',
  level: '专业版',
  subAccount: [
    {
      account: 'xxxxx',
      name: '',
      active: false
    }
  ]
});
const editPwdInfo = ref({
  show: false
});

const toPath = e => {
  router.push(e);
}
const openEditPwd = e => {
  editPwdInfo.value = {
    show: true,
    ...e
  }
}
const pwdConfirm = () => {
  editPwdInfo.value.show = false;
}
</script>

<style lang="less" scoped>
.content {
  padding: 20px 32px 24px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);

  .title {
    color: #333;
    margin-bottom: 24px;
  }

  .account-main {
    width: 413px;
    margin-right: 10px;
  }

  .account-list {
    width: 497px;
  }

  .account-label {
    line-height: 20px;
    color: #666;
    margin-bottom: 16px;
  }

  .account-info {
    width: 286px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    color: #666;
    line-height: 30px;
    margin-bottom: 16px;
  }

  .account-desc {
    color: #333;
    margin-bottom: 12px;

    i {
      font-size: 12px;
      color: @main-color;
    }

    span {
      color: @main-color;

      &.pointer {
        border-bottom: 1px solid @main-color;
      }
    }
  }

  .list {
    border: 1px solid #e5e7eb;

    .item {
      border-bottom: 1px solid #e5e7eb;

      &:last-child {
        border-bottom: none;
      }

      &>p {
        border-left: 1px solid #e5e7eb;
        height: 32px;
        text-align: center;
        line-height: 32px;
        color: #666;

        &:first-child {
          border-left: none;
        }
      }

      &>:nth-child(1) {
        width: 96px;
      }

      &>:nth-child(2) {
        width: 202px;
      }

      &>:nth-child(3) {
        width: 100px;
      }

      &>:nth-child(4) {
        width: 88px;
      }

      .item-input {
        padding: 0 8px;
        border-left: 1px solid #e5e7eb;

        input {
          width: 70px;
          font-size: 12px;
          border: none;
        }

        i {
          font-size: 14px;
          color: @main-color;
        }
      }

      .item-btns {
        border-left: 1px solid #e5e7eb;

        p {
          color: @main-color;
        }
      }
    }
  }
}
</style>
